<template>
    <el-card>
    <div>
        <!-- 头顶 -->
        <el-breadcrumb separator="/" class="a">
            <!-- :to="{ path: '/users' }"  跳转 -->
            <el-breadcrumb-item :to="{ path: '/users' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 表 -->
        <el-table
                :data="quanxianlist"
                max-height="420"
                style="width: 100%">
            <el-table-column  label="#" type="index" />
            <el-table-column label="权限名称" prop="authName" />
            <el-table-column label="路径" prop="path" />
            <el-table-column label="权限等级" >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level==='0'"> 一级 </el-tag>
                    <el-tag v-else-if="scope.row.level==='1'" style="color: gray;">  二级 </el-tag>
                    <el-tag v-else style="color: red;"> 三级 </el-tag> 
                </template>
            </el-table-column>
        </el-table>
            <!-- current-page当前页
          page-size：每页记录数
          page-sizes：每页记录数下拉列表，第一个数与每页记录数必须一致
          total：总记录数 -->
          <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pagenum"
                :page-sizes="[1,5, 30, 50]"
                :page-size="params.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
            </el-pagination>
            
            
        
    </div>
</el-card>
</template>

<script>
export default {
    data(){
        return{
            params:{
                authName:"",
                path:"",
                pagenum:1,
                pagesize:5
            },
           
            rules:{

            },
            quanxianlist:[],
            bianJI:[],
            total:0,
        }
        
    },
    methods:{ 
        //修改每页记录数
        handleSizeChange(val){
            this.params.pagesize=val*1;
            this.initTable();
        },
        //点击分页按钮
        handleCurrentChange(val){
            this.params.pagenum=val*1;
            this.initTable();
        },
        async initTable(){
            let {data}=await this.$http.get("/api/private/v1/rights/list",
            {params:this.params});
            this.quanxianlist=data;
            console.log(this.quanxianlist);
            console.log(data);
            this.total=data.total;
        }
    },
    async mounted(){
        this.initTable();
        }
    }

</script>

<style lang="scss" scoped>
    .el-header, .el-footer {
        background-color: #edeff3;
        color: #333(202, 68, 68);
        text-align: center;
        line-height: 60px;
        }
        .to{
            display: flex;
            flex-direction: row;
           
        }
        .a{
            width: 100%;
            height: 60px;
            background-color: #e0e5ee;
            text-align: center;
            line-height: 60px;
        }
</style>